<template>
    <el-container>
      <el-header>
        <h1>添加设备</h1>
      </el-header>
      <el-main>
        <el-form :model="device" label-width="100px">
          <el-form-item label="设备名称">
            <el-input v-model="device.name" />
          </el-form-item>
          <el-form-item label="设备位置">
            <el-input v-model="device.location" />
          </el-form-item>
          <el-form-item label="设备状态">
            <el-select v-model="device.status">
              <el-option label="在线" value="online" />
              <el-option label="离线" value="offline" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        device: {
          name: '',
          location: '',
          status: 'online',
        },
      };
    },
    methods: {
      async submit() {
        await this.$api.createDevice(this.device);
        this.$router.push('/devices');
      },
      cancel() {
        this.$router.push('/devices');
      },
    },
  };
  </script>